<template>
    <div id="datetime-picker-demo" class="demo-wrapper">
        <h3>datetime picker demo</h3>
        <p class=“demo-item”>
            <input type="text" class="demo-input" @click="openPicker(1)" placeholder="Demo1 - 年" v-model="demo1.selectedValue"/>
            <v-date-picker :type="demo1.type" :isShow="demo1.isShow" @confirm="confirmPicker($event,1)" @cancel="closePicker(1)" :model="defaultValue"></v-date-picker>
        </p>

        <p class=“demo-item”>
            <input type="text" class="demo-input" @click="openPicker(2)" placeholder="Demo2 - 年月" v-model="demo2.selectedValue"/>
            <v-date-picker :type="demo2.type" :isShow="demo2.isShow" @confirm="confirmPicker($event,2)" @cancel="closePicker(2)" :model="defaultValue"></v-date-picker>
        </p>

        <p class=“demo-item”>
            <input type="text" class="demo-input" @click="openPicker(3)" placeholder="Demo3 - 年月日" v-model="demo3.selectedValue"/>
            <v-date-picker :type="demo3.type" :isShow="demo3.isShow" @confirm="confirmPicker($event,3)" @cancel="closePicker(3)" :model="defaultValue"></v-date-picker>
        </p>

        <p class=“demo-item”>
            <input type="text" class="demo-input" @click="openPicker(4)" placeholder="Demo4 - 年月日时" v-model="demo4.selectedValue"/>
            <v-date-picker :type="demo4.type" :isShow="demo4.isShow" @confirm="confirmPicker($event,4)" @cancel="closePicker(4)" :model="defaultValue"></v-date-picker>
        </p>

        <p class=“demo-item”>
            <input type="text" class="demo-input" @click="openPicker(5)" placeholder="Demo5 - 年月日时分" v-model="demo5.selectedValue"/>
            <v-date-picker :type="demo5.type" :isShow="demo5.isShow" @confirm="confirmPicker($event,5)" @cancel="closePicker(5)" :model="defaultValue"></v-date-picker>
        </p>

        <p class=“demo-item”>
            <input type="text" class="demo-input" @click="openPicker(6)" placeholder="Demo6 - 年月日时分秒" v-model="demo6.selectedValue"/>
            <v-date-picker :type="demo6.type" :isShow="demo6.isShow" @confirm="confirmPicker($event,6)" @cancel="closePicker(6)" :model="defaultValue"></v-date-picker>
        </p>

        <p class=“demo-item”>
            <input type="text" class="demo-input" @click="openPicker(7)" placeholder="Demo7 - 时" v-model="demo7.selectedValue"/>
            <v-date-picker :type="demo7.type" :isShow="demo7.isShow" @confirm="confirmPicker($event,7)" @cancel="closePicker(7)" :model="defaultValue"></v-date-picker>
        </p>

        <p class=“demo-item”>
            <input type="text" class="demo-input" @click="openPicker(8)" placeholder="Demo8 - 时分" v-model="demo8.selectedValue"/>
            <v-date-picker :type="demo8.type" :isShow="demo8.isShow" @confirm="confirmPicker($event,8)" @cancel="closePicker(8)" :model="defaultValue"></v-date-picker>
        </p>

        <p class=“demo-item”>
            <input type="text" class="demo-input" @click="openPicker(9)" placeholder="Demo9 - 时分秒" v-model="demo9.selectedValue"/>
            <v-date-picker :type="demo9.type" :isShow="demo9.isShow" @confirm="confirmPicker($event,9)" @cancel="closePicker(9)" :model="defaultValue"></v-date-picker>
        </p>

        <p class=“demo-item”>
            <input type="text" class="demo-input" @click="openPicker(10)" placeholder="Demo10 - 年月日 - 设置最大、最小年份" v-model="demo10.selectedValue"/>
            <v-date-picker :type="demo10.type" :isShow="demo10.isShow" @confirm="confirmPicker($event,10)" @cancel="closePicker(10)" :model="defaultValue" :max-year="demo4.maxYear" :min-year="demo4.minYear">请选择日期</v-date-picker>
        </p>
    </div>
</template>

<script>
    import VDatePicker from "@/components/DateTimePicker/DateTimePicker.vue";
    export default {
        name: "timepickerDemo",
        data() {
            return {
                demo1: {
                    type: 1,
                    isShow: false,
                    selectedValue: ""
                },
                demo2: {
                    type: 2,
                    isShow: false,
                    selectedValue: ""
                },
                demo3: {
                    type: 3,
                    isShow: false,
                    selectedValue: ""
                },
                demo4: {
                    type: 4,
                    isShow: false,
                    selectedValue: ""
                },
                demo5: {
                    type: 5,
                    isShow: false,
                    selectedValue: ""
                },
                demo6: {
                    type: 6,
                    isShow: false,
                    selectedValue: ""
                },
                demo7: {
                    type: 7,
                    isShow: false,
                    selectedValue: ""
                },
                demo8: {
                    type: 8,
                    isShow: false,
                    selectedValue: ""
                },
                demo9: {
                    type: 9,
                    isShow: false,
                    selectedValue: ""
                },
                demo10: {
                    type: 2,
                    maxYear: 2020,
                    minYear: 1900,
                    isShow: false,
                    selectedValue: ""
                },
            };
        },
        components: {
            VDatePicker
        },
        computed: {
            defaultValue(){
                return "2020-05-16 10:03:06";
            }
        },
        methods: {
            openPicker(idx){
                let d = "demo"+idx.toString();
                this[d].isShow = true;
            },
            closePicker(idx){
                let d = "demo"+idx.toString();
                this[d].isShow = false;
            },
            confirmPicker(result, idx){
                let d = "demo"+idx.toString();
                this[d].isShow = false;
                this[d].selectedValue = result;
                console.log(result);
            }
        }
    };
</script>
<style>
    h3{
        text-align: center;
    }
    .demo-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
    }
    p{
        padding: 0.5rem 0;
    }

    .demo-input {
        width: 100%;
        height: 49px;
        line-height: 49px;
        outline: none;
        border: 1px solid #e2e2e2;
    }
</style>
